<template>
  <div class="content_index">
    <div class="ci_header">
      <div class="ci_left">批量取证</div>
    </div>
    <div class="ci_note">
      <DescriptionBlock data="展示批量取证" />
    </div>
    <div class="ci_des">
      <div class="title_personal">批量取证</div>
    </div>
    <div class="ci_des">
      <el-form
        :model="form"
        ref="personFormRef"
        :rules="personFormRefRules"
        label-width="120px"
      >
        <el-form-item label="取证类型：" prop="type">
          <el-select
            v-model="form.type"
            clearable
            placeholder="请选择取证类型"
            style="margin-right: 10px"
          >
            <el-option label="网页取证" value="2" />
            <el-option label="截屏取证" value="1" />
          </el-select>
        </el-form-item>
        <el-form-item label="">
          批量模板下载：<span
            style="color: #2a82e4; cursor: pointer"
            @click="download"
            >下载</span
          >
        </el-form-item>
        <el-form-item label="取证：" prop="file">
          <el-upload
            accept=".xlsx,.xls"
            class="upload_file"
            drag
            :limit="1"
            ref="uploadFileCardFront"
            action="#"
            list-type="text"
            :auto-upload="false"
            :on-change="changeAvatarUploadFile"
            v-model="form.file"
          >
            <el-icon class="el-icon--upload"><upload-filled /></el-icon>
            <div class="el-upload__text">拖拽或点击上传文件</div>
          </el-upload>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSubmit" :loading="isLoading"
            >提交</el-button
          >
          <!-- <el-button>Cancel</el-button> -->
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>
<script setup>
import { DescriptionBlock } from "../../components/index";
import {
  addEvidenceObtainImage,
  addEvidenceObtainWeb,
} from "@/api/obtainEvidence";
import store from "@/store";
import { ref, reactive, onUnmounted } from "vue";
import { ElMessage } from "element-plus";
import { useRouter } from "vue-router";
const router = useRouter();
const personFormRef = ref("form");
const formData = new FormData();
const isLoading = ref(false);
const form = reactive({
  type: "",
  file: [],
});
/** 表单校验规则 */
const personFormRefRules = {
  type: [
    {
      required: true,
      message: "请选择取证类型",
      trigger: "blur",
    },
  ],
  file: [
    {
      required: true,
      message: "请上传文件",
      trigger: "blur",
    },
  ],
};
const changeAvatarUploadFile = (rawFile, fileList) => {
  if (
    rawFile.raw.type !==
      "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet" &&
    rawFile.raw.type !== "application/vnd.ms-excel"
  ) {
    ElMessage.error("文件格式只能为.xlsx或者.xls!");
    if (form.file.length <= 0) {
      form.file = [];
    } else {
      form.file = form.file.filter((item) => {
        return item.name !== rawFile.name;
      });
    }
    return false;
  }
  // } else if (rawFile.size / 1024 / 1024 > 5) {
  //   ElMessage.error("照片大小不能超过 5MB!");
  //   if (form.file.length <= 0) {
  //     form.file = [];
  //   } else {
  //     form.file = fileList.slice(0, 1);
  //   }
  //   return false;
  // }
  formData.set("file", rawFile.raw); //以formData格式传递图片信息
  return true;
};
const download = () => {
  let a = document.createElement("a");
  document.body.appendChild(a);
  a.href = "https://localhost:9000/icep/template/批量取证模板.xlsx";
  a.download = "批量取证模板" + ".xlsx";
  a.style.display = "none";
  a.click();
  document.body.removeChild(a);
  a.remove(); // 一次性的，用完就删除a标签
};
const onSubmit = () => {
  personFormRef.value?.validate(async (valid) => {
    if (valid) {
      isLoading.value = true;
      let parmars = {
        file: formData.get("file"),
      };
      if (form.type === "1") {
        addEvidenceObtainImage(parmars)
          .then((res) => {
            if (res.success) {
              // ElMessage.success(res.msg || "批量取证成功!");
              isLoading.value = false;
              router.push({ path: "/EbtainEvidence/Evidence" });
            } else {
              isLoading.value = false;
              ElMessage.error(res.msg || "批量取证失败!");
            }
          })
          .catch((err) => {
            isLoading.value = false;
            ElMessage.error(err.msg || "批量取证失败!");
          });
      } else if (form.type === "2") {
        addEvidenceObtainWeb(parmars)
          .then((res) => {
            if (res.success) {
              // ElMessage.success(res.msg || "批量取证成功!");
              isLoading.value = false;
              router.push({ path: "/EbtainEvidence/Evidence" });
            } else {
              isLoading.value = false;
              ElMessage.error(res.msg || "批量取证失败!");
            }
          })
          .catch((err) => {
            isLoading.value = false;
            ElMessage.error(err.msg || "批量取证失败!");
          });
      }
    } else {
      return false;
    }
  });
};
</script>
<style lang="scss" scoped>
@import "../../assets/css/list.scss";
@import "../../assets/css/position.scss";

.content_index {
  :deep.el-input {
    width: 90%;
    max-width: 400px;
  }
  :deep .iconfont__header_icon {
    width: 16px;
    margin-top: 8px;
  }
  .title_personal {
    font-size: 16px;
    font-weight: 700;
  }
}
.content_index {
  :deep.el-select {
    width: 95%;
    border-radius: 0;

    :deep .el-input {
      width: 95%;
      border-radius: 0 !important;
    }
    .el-input__suffix {
      display: flex;
      justify-content: center;
      align-items: center;
    }
    .el-input__inner {
      height: 32px;
      line-height: 32px;
      border-radius: 0;
      font-size: 12px;
    }
  }
}

.aitem {
  cursor: pointer;
  color: #2186fb;
}

.nodata_tips {
  margin-left: 5px;
  color: #2186fb;
  cursor: pointer;
}
.el-upload__text {
  height: 20px;
}
</style>
